带你入门 JavaScript ES6 (一)

本文同步 带你入门 JavaScript ES6 (一)，转载请注明出处。

ES6: 是 ECMA国际组织于 2015 年 6 月 17 日发布的 ECMAScript 第六版，正式名为 ECMAScript 2015,通常被成为 ES6 或 ECMAScript 6。

目录：

• 一、let 和 const 声明块作用域变量
• 二、模版字面量
• 三、解构赋值
• 四、对象字面量简写
• 五、默认参数

一、 let 和 const 声明块作用域变量

ES6 引入 let 和 const 作为块作用域(用花括号 {} 表示)变量声明语法，用法同之前的 var 声明变量类似。不同之处在于不会对申明的变量(或常量)提升作用域范围

1.1 let 变量声明

let 语法用于声明块作用域内的可重新赋值的变量，作用域内无法重新声明

MDN let

let name = 'huliuqing'
name = 'Hu Liuqing'
console.log(name)

1.2 const 常量声明

const 语法用于声明是必须 赋值初始值,并且无法重新复制，作用域内不能重新声明

MDN const

const PI = 3.14
PI = 3.1415 //报错 Uncaught TypeError: Assignment to constant variable.
console.log(PI)

1.3 let, const 和 var 比较

function findSeason(search) {
    var seasons = ['Spring', 'Summer', 'Autumn', 'Winter']

    for (season of seasons) {
        console.log("------START-------")
        console.log("current season:" + season + " I'm find:" + search)

        if (season.toLowerCase() == search.toLowerCase()) {
            let isSpring        = search.toLowerCase() == 'spring'
            var theSeason       = season
            const SUMMER_SEASON = 'Summer'
            
            console.log("isSpring 1: " + isSpring)
            console.log("SUMMER_SEASON 1:"  + SUMMER_SEASON)
            
            return SUMMER_SEASON
        } else {
            console.log("currentIterSeason is:" + theSeason)
        }        

        try{
            console.log("isSpring 2: " + isSpring)
        } catch (e) {
            console.error(e.message)
        }

        try{
            console.log("SUMMER_SEASON2:" + SUMMER_SEASON)
        } catch (e) {
            console.error(e.message)
        }
    }
}

console.log(findSeason("spring"))

console.log(findSeason("summer"))

console.log(seasons)


//运行如下
------START-------
current season:Spring I'm find:spring
isSpring 1: true
SUMMER_SEASON 1:Summer
Summer

------START-------
current season:Spring I'm find:summer
currentIterSeason is:undefined
isSprint is not definedfindSeason 
SUMMER_SEASON 2: SUMMER_SEASON is not definedfindSeason  
------START-------
current season:Summer I'm find:summer
isSpring 1: false
SUMMER_SEASON 1:Summer
Summer

Uncaught ReferenceError: seasons is not defined

• let isSpring, var theSeason, const SUMMER_SEASON 都是定义在 if 代码块内
• 当在 if 代码块外调用isSpring, theSeason, SUMMER_SEASON时，由于 let 和 const 块作用域特性会在控制台报 not defined 错误；而 var 定义的 theSeason 不会报错而仅输出 undefined，这是因为 var 声明的变量将作用域范围提升至 getSeason 作用域范围内。

二、 模版字面量

提供一种简单实现表达式嵌套的字符串字面量操作，简而言之就是能够以简单的方法实现字符串拼接操作。

模版字面量

2.1 ES6 之前字符串拼接实现

let name = 'huliuqing'
let age = 18
let conent = '你的名字:' + name + ' 你今年几岁了？' + age

随着拼接内容的增多，拼接操作越加复杂

2.2 ES6 使用飘号(``: 同 ~ 号在同一键位) 声明字符串字面量

let result = `请计算 1 + 2 的结果 ${1 + 2}`
console.log(result);

let name = 'huliuqing'
console.log(`你的名字？${name}`)

三、 解构赋值

将值从数组或对象属性提取到不同变量中

MDN 解构赋值

ES6 之前，如果我们需要将数组中元素或对象中属性提取值并赋值给变量，实现起来比较复杂:

let numeric = [0, 1, 2]
let a = numeric[0]
let b = numeric[1]
let c = numeric[2]

console.log(a)
console.log(b)
console.log(c)

解构赋值：语法同对象或数组初始化赋值语法，不同之处在于申明左侧定义了需要赋值的变量数组或提取的对象属性。

3.1 解构数组中的值

// 1
let seasons = ['Spring', 'Summer', 'Autumn', 'Winter']
let [spring, summer, autumn, winter] = seasons // 将season 中的各个元素解构到左侧变量

console.log(spring)// Spring
console.log(summer)// Summer
console.log(autumn)// Autumn
console.log(winter)// Winter

// 2 将数组中剩余部分赋值给一个变量
let [spring2, summer2, ...autumnAndWinter] = seasons

console.log(spring2)//Spring
console.log(summer2)// Summer
console.log(autumnAndWinter)// ['Autumn', 'Winter']

3.2 解构对象中的值

// 1
let user = {name: 'huliuqing', age: 18}
let {name, age} = user
console.log(name)
console.log(age)

3.2 默认值

// 数组解构默认值
let [a = 5, b = 7] = [1]
console.log(a)// 1 
console.log(b)// 7

//对象解构默认值
let {name = 'hlq', age = 18} = {name: 'huliuqing'}

console.log(name)// huliuqing
console.log(age)// 18

3.3 解构数组时忽略某些值的解构

let [a, , c] = [1, 2, 3]
console.log(a)// 1
console.log(c)// 3

let {name, , address} = {name: 'huliuqing', age: 18, address: 'shanghai'}

四、 对象字面量简写

MDN 对象初始化

对象字面量简写，提供一种对初始化一个对象时，它的对象属性名与待赋值的变量名同名的初始化简写方法

比较绕口？

4.1 ES6 之前对象初始化

let name = 'huliuqing'
let age = 18
let user = {
    name: name,
    age: age
}
console.log(user)// Object {name: "huliuqing", age: 18}

我们可以看到属性的赋值方式 name: name，age: age， 这就是冗长的点。

4.2 对象字面量简写

let name = 'huliuqing'
let age = 18
let user = {
    name,
    age
}
console.log(user)// Object {name: "huliuqing", age: 18}

4.3 对象中方法简写

同属性字面量简写类似，新的 ES6 语法提供了对象方法的简写

let name = 'huliuqing'
let age = 18
let user = {
    name,
    age,
    getUser() {
        return `${name} : ${age}`
    }, // ES6 语法
    //getUser: function() {
    //    return `${name} : ${age}`        
    //} // 之前的语法
}
console.log(user.getUser()) // huliuqing : 18

五、默认参数

函数默认参数允许在函数没有值或 undefined 被传入时，使用默认形参

// ES6 之前
function multiply(a, b) {
    a = typeof a === 'undefined' ? 1 : a;
    b = typeof b === 'undefined' ? 1 : b;

    return a * b;
}

multiply(2) //2
multiply(5,2) //10

// ES6 之后

function multiply(a = 1, b = 1) {
    return a * b;
}

multiply(2) // 2
multiply(5,2)// 10

参考资料

MDN

MDN let

MDN 解构赋值

MDN 对象初始化

MDN 默认参数